<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- store 状态仓库使用 -->
    <!-- <p>count:{{$store.state.count}}</p> -->
    <p>count:{{$store.state.home.count}}</p>
    <button @click="addCount">加法</button>
    <button @click="decrement">减法</button>
    <p>派生属性 desc: {{ $store.getters.desc }}</p>
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  },
  methods: {
    addCount() {
      // 获取状态值
      // console.log(this.$store.state.count);
      console.log(this.$store.state.home.count);
      // 通过commit 调用 mutations 中的 increment 改变状态值
      // this.$store.commit("increment")
      // this.$store.commit("increment",10); // 提交载荷
      this.$store.dispatch('add', 10) // 触发 actions 中的 add 改变状态值
    },
    decrement() {
      // 通过commit 调用 mutations 中的 decrement 改变状态值
      // this.$store.commit("decrement");
      this.$store.dispatch('decrement')
    }
  }
};
</script>
